<template>
  <el-dropdown trigger="click" @command="handleCommand">
    <div class="nav-avatar">
      <el-avatar icon="el-icon-user-solid" size="small"></el-avatar>
      <span class="uname">admin</span>
      <i class="el-icon-arrow-down"></i>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="update">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent({
  setup() {
    const {proxy} = getCurrentInstance()

    const handleCommand = async (type) => {
      //退出登录
      if (type === 'logout') {
        const info = await proxy.$confirm('此操作将退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)

        if (info === 'cancel') return

        sessionStorage.removeItem('token')
        proxy.$router.replace('/login')
      }
    }

    return {
      handleCommand
    }
  },
})
</script>

<style lang="scss" scoped>

  .nav-avatar {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
    
    .uname {
      margin: 0 10px;
    }
  }

  .nav-avatar:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

</style>